<template>
    <div>

        <el-tabs>

            <el-tab-pane label="人员信息">
                <el-form
                        ref="dataForm"
                        status-icon
                        :model="form"
                        :rules="rules"
                        label-width="0px"
                >
                    <el-descriptions :column="3" border>
                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 省份</template>
                            <el-form-item prop="province_id">
                                <el-select
                                        v-model="form.province_id"
                                        placeholder="请选择省份"
                                        @change="getCityList()"
                                        style="width: 100%"
                                        clearable
                                >
                                    <el-option
                                            v-for="item in provinceList"
                                            :key="item.id"
                                            :label="item.district"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 城市</template>
                            <el-form-item prop="city_id">
                                <el-select
                                        placeholder="请选择城市"
                                        v-model="form.city_id"
                                        @change="getCountyList()"
                                        style="width: 100%"
                                        clearable
                                >
                                    <el-option
                                            v-for="item in cityList"
                                            :key="item.id"
                                            :label="item.district"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 区/县</template>
                            <el-form-item prop="district_id">
                                <el-select
                                        placeholder="请选择区/县"
                                        v-model="form.district_id"
                                        @change="getTownList()"
                                        style="width: 100%"
                                        clearable
                                >
                                    <el-option
                                            v-for="item in countyList"
                                            :key="item.id"
                                            :label="item.district"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 所属乡镇</template>
                            <el-form-item prop="town_id">
                                <el-select
                                        placeholder="请选择乡镇"
                                        v-model="form.town_id"
                                        @change="getVillageList()"
                                        style="width: 100%"
                                        clearable
                                >
                                    <el-option
                                            v-for="item in townList"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 所属村</template>
                            <el-form-item prop="village_id">
                                <el-select
                                        placeholder="请选择村"
                                        v-model="form.village_id"
                                        style="width: 100%"
                                        clearable
                                >
                                    <el-option
                                            v-for="item in villageList"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>


                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 姓名</template>
                            <el-form-item prop="name">
                                <el-input v-model="form.name" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 身份证号码</template>
                            <el-form-item prop="sfz">
                                <el-input v-model="form.sfz" @blur="getBirthday" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 性别</template>
                            <el-form-item prop="sex">
                                <el-select
                                        placeholder="请选择性别"
                                        v-model="form.sex"
                                        style="width: 100%"
                                        clearable
                                >
                                    <el-option
                                            v-for="item in sexList"
                                            :key="item.name"
                                            :label="item.name"
                                            :value="item.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 出生日期</template>
                            <el-form-item prop="birthday">
                                <el-date-picker
                                        v-model="form.birthday"
                                        type="date"
                                        placeholder="选择日期"
                                        :value-format="'yyyy-MM-dd'"
                                        style="width: 100%"
                                        clearable
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 民族</template>
                            <el-form-item prop="nation">
                                <el-select
                                        placeholder="请选择民族"
                                        style="width: 100%"
                                        v-model="form.nation"
                                        filterable
                                        clearable
                                >
                                    <el-option
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value"
                                            v-for="item in nationList"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 手机号</template>
                            <el-form-item prop="phone">
                                <el-input v-model="form.phone" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 23%">
                            <template slot="label"><span class="red">*</span> 住址</template>
                            <el-form-item prop="address">
                                <el-input v-model="form.address" clearable></el-input>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template slot="label"><span class="red">*</span> 筛查类型</template>
                            <el-form-item prop="screening_type">
                                <el-radio-group v-model="form.screening_type">
                                    <el-radio :label="1">初筛</el-radio>
                                    <el-radio :label="2">随访</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-descriptions-item>

                        <el-descriptions-item v-if="form.screening_type == 2">
                            <template slot="label"><span class="red">*</span> 随访次数</template>
                            <el-form-item prop="follow_up_number">
                                <el-input v-model="form.follow_up_number"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item v-else>
                        </el-descriptions-item>

                        <el-descriptions-item></el-descriptions-item>

                        <el-descriptions-item labelStyle="width: 10%" contentStyle="width: 90%">
                            <el-form-item label=" ">
                                <el-button @click="handleDialogVisible(false)" size="small"
                                >取 消
                                </el-button
                                >
                                <el-button
                                        type="primary"
                                        @click="!form.id ? create() : update()"
                                        size="small"
                                >确 定
                                </el-button>
                                <el-button type="primary" @click="rSfz()" size="small"
                                >读取身份证
                                </el-button>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="默认信息">
                <!--基本信息start-->
                <el-form :model="formDefault" :rules="rules2" ref="defaultDataForm" label-width="0px">
                    <el-descriptions :column="3" border class="margin-top">
                        <el-descriptions-item
                                labelStyle="width: 13%"
                                contentStyle="width: 20%"
                        >
                            <template slot="label"> 省份</template>
                            <el-form-item prop="province_id">
                                <el-select
                                        v-model="formDefault.province_id"
                                        placeholder="请选择省份"
                                        @change="getDefaultCitysList()"
                                        style="width: 100%"
                                >
                                    <el-option
                                            v-for="item in provinceList"
                                            :key="item.id"
                                            :label="item.district"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item
                                labelStyle="width: 13%"
                                contentStyle="width: 20%"
                        >
                            <template slot="label"> 城市</template>
                            <el-form-item prop="city_id">
                                <el-select
                                        v-model="formDefault.city_id"
                                        placeholder="请选择城市"
                                        @change="getDefaultDistrictList()"
                                        style="width: 100%"
                                >
                                    <el-option
                                            v-for="item in cityDefaultList"
                                            :key="item.id"
                                            :label="item.district"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item
                                labelStyle="width: 13%"
                                contentStyle="width: 20%"
                        >
                            <template slot="label"> 所属区/县</template>
                            <el-form-item prop="district_id">
                                <el-select
                                        v-model="formDefault.district_id"
                                        placeholder="请选择区/县"
                                        style="width: 100%"
                                >
                                    <el-option
                                            v-for="item in districtDefaultList"
                                            :key="item.id"
                                            :label="item.district"
                                            :value="item.id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                    <div style="margin: 20px 20px">
                        <div class="dialog-footer" slot="footer">
                            <el-button @click="!formDefault.id ? createDefaultData() : updateDefaultData()"
                                       type="primary">确 定
                            </el-button>
                        </div>
                    </div>
                </el-form>
                <!--基本信息end-->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import {createData, updateData, getHistoryData} from '@/api/data/data';
    import {listTask} from "@/api/task/task";
    import {allRegion} from "@/api/region/region";
    import {villageAll} from "@/api/village/village";
    import {configList} from "@/api/config/config";
    import {
        getInstitutionIdByData,
        createDefault,
        updateDefault,
    } from "@/api/userInformation/userInformation";

    export default {
        props: ["rowData", "dialogStatus"],
        components: {},
        data() {
            return {
                form: {
                    id: "",
                    institution_id: this.$store.state.member.institution_id,
                    province_id: "",
                    city_id: "",
                    district_id: "",
                    town_id: "",
                    village_id: "",
                    name: "",
                    sex: "",
                    nation: "",
                    birthday: "",
                    address: "",
                    sfz: "",
                    phone: "",
                    screening_type: 1,
                    follow_up_number: "",
                    user_status: 0,
                    scene: 'user',
                },
                formDefault: {
                    id: "",
                    province_id: "",
                    city_id: "",
                    district_id: "",
                    institution_id: this.$store.state.member.institution_id,
                },
                provinceDefaultList: [],
                //市
                cityDefaultList: [],
                //区县
                districtDefaultList: [],
                rules2: {
                    province_id: [
                        {
                            required: true,
                            message: "请选择省",
                            trigger: "blur",
                        },
                    ],
                    city_id: [
                        {
                            required: true,
                            message: "请选择市",
                            trigger: "blur",
                        },
                    ],
                    district_id: [
                        {
                            required: true,
                            message: "请选择区县",
                            trigger: "blur",
                        },
                    ],
                },
                rules: {
                    province_id: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "省份不能为空",
                        },
                    ],
                    city_id: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "城市不能为空",
                        },
                    ],
                    district_id: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "区县不能为空",
                        },
                    ],
                    town_id: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "乡镇不能为空",
                        },
                    ],
                    village_id: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "村不能为空",
                        },
                    ],
                    name: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "姓名不能为空",
                        },
                    ],
                    sex: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "性别不能为空",
                        },
                    ],
                    nation: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "民族不能为空",
                        },
                    ],
                    birthday: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "出生日期不能为空",
                        },
                    ],
                    address: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "住址不能为空",
                        },
                    ],
                    sfz: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "身份证号码不能为空",
                        },
                    ],
                    phone: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "手机号不能为空",
                        },
                    ],

                },
                createLoading: false,
                updateLoading: false,
                provinceList: [],
                cityList: [],
                countyList: [],
                townList: [],
                villageList: [],
                taskList: [],
                nationList: [],
                sexList: [
                    {
                        name: "男",
                    },
                    {
                        name: "女",
                    },
                ],
            };
        },
        created() {
            this.getDefault();
            this.getProvinceList();
            this.getListTask();
            this.getConfigList();
            if (this.dialogStatus == "update") {
                this.form = {...this.rowData};
                this.form.sarcoidosis = this.form.sarcoidosis ? JSON.parse(this.form.sarcoidosis) : [];
                this.form.lymph = this.form.lymph ? JSON.parse(this.form.lymph) : [];
                this.form.lump = this.form.lump ? JSON.parse(this.form.lump) : [];
                this.getCityList();
                this.getCountyList();
                this.getVillageList();
                this.getTownList();
            }
        },
        methods: {
            rSfz(msg) {
                let that = this;
                if (that.global.ws && that.global.ws.readyState == 1) {
                    console.log("发送信息", msg);
                    that.global.ws.send("03?timeout=10000");
                }
                that.global.ws.onmessage = function (res) {
                    var alldata = res.data.split("|");
                    if (alldata.length >= 17) {
                        that.form.name = alldata[1]; //姓名
                        that.form.sex = alldata[2]; //性别
                        let nation = alldata[3] + '族'; //民族
                        let nation_value;
                        that.nationList.forEach(function (item) {
                            if (item.name == nation) {
                                nation_value = item.value
                                return nation_value;
                            }
                        })
                        that.form.address = alldata[5]; //住址
                        that.form.nation = nation_value; //民族
                        that.form.birthday = that.setDate(alldata[4]); //出生日期
                        that.form.address = alldata[5]; //住址
                        that.form.sfz = alldata[6]; //身份证号码
                        that.form.issuing_authority = alldata[7]; //签发机关
                    }
                };
            },
            //处理日期
            setDate(e) {
                return (e.substr(0, 4) + "-" + e.substr(4, 2) + "-" + e.substr(6, 2));
            },
            //获取默认信息
            getDefault() {
                getInstitutionIdByData({
                    institution_id: this.$store.state.member.institution_id,
                }).then((result) => {
                    if (result.code === 200 && result.data != null) {
                        this.formDefault = result.data;
                        if (this.formDefault.id) {
                            this.getDefaultProvincesList();
                            this.getDefaultCitysList();
                            this.getDefaultDistrictList();
                        }
                    }
                }).catch((err) => {
                    console.log("err", err);
                });
            },
            //获取省份
            getDefaultProvincesList() {
                let param = {
                    pid: 1
                }
                allRegion(param).then((res) => {
                    if (res.code == "200") {
                        this.provinceDefaultList = res.data;
                        if (!this.form.province_id) {
                            this.form.province_id = this.formDefault.province_id;
                        }
                    }
                });
            },
            //获取城市
            getDefaultCitysList() {
                if (this.formDefault.province_id) {
                    allRegion({pid: this.formDefault.province_id}).then((res) => {
                        if (res.code == "200") {
                            this.cityDefaultList = res.data;
                            if (!this.form.city_id) {
                                this.cityList = res.data;
                                this.form.city_id = this.formDefault.city_id;
                                this.getTownList();
                            }
                        }
                    });
                }
            },
            //获取区县
            getDefaultDistrictList() {
                if (this.formDefault.city_id) {
                    allRegion({pid: this.formDefault.city_id}).then((res) => {
                        if (res.code == "200") {
                            this.districtDefaultList = res.data;
                            if (!this.form.district_id) {
                                console.log(res.data, '22')
                                this.countyList = res.data;
                                this.form.district_id = parseInt(this.formDefault.district_id);
                                this.getTownList();

                            }
                        }
                    });
                }
            },
            createDefaultData() {
                this.$refs["defaultDataForm"].validate((valid) => {
                    if (valid) {
                        createDefault(this.formDefault).then((response) => {
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
            //默认信息修改
            updateDefaultData() {
                this.$refs["defaultDataForm"].validate((valid) => {
                    if (valid) {
                        updateDefault(this.formDefault).then((response) => {
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
            getProvinceList() {
                let param = {
                    pid: 1
                }
                allRegion(param).then((res) => {
                    if (res.code === 200) {
                        this.provinceList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCityList() {
                if (!this.form.province_id) {
                    return false;
                }
                allRegion({pid: this.form.province_id}).then((res) => {
                    if (res.code === 200) {
                        this.cityList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            getCountyList() {
                if (!this.form.city_id) {
                    return false;
                }
                allRegion({pid: this.form.city_id}).then((res) => {
                    if (res.code === 200) {
                        this.countyList = res.data;
                        this.getTownList();

                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //获取乡镇
            getTownList() {
                if (!this.form.district_id) {
                    return false;
                }
                villageAll({pid: 0, district_id: this.form.district_id}).then((res) => {
                    if (res.code == "200") {
                        this.townList = res.data;
                    }
                });
            },
            //获取村
            getVillageList() {
                if (!this.form.town_id) {
                    return false;
                }
                villageAll({pid: this.form.town_id}).then((res) => {
                    if (res.code == "200") {
                        this.villageList = res.data;
                    }
                });
            },
            //民族
            getConfigList() {
                configList({type: "nation"}).then((result) => {
                    this.nationList = result.data;
                }).catch((err) => {
                    console.log("err", err);
                });
            },
            setUser(data) {
                this.form.institution_id = data.institution_id;
                this.form.institution_name = data.institution_name;
                this.form.id_num = data.id_num;
                this.form.province_id = data.province_id;
                this.form.province_name = data.province_name;
                this.form.city_id = data.city_id;
                this.form.city_name = data.city_name;
                this.form.district_id = data.district_id;
                this.form.district_name = data.district_name;
                this.form.town_id = data.town_id;
                this.form.town_name = data.town_name;
                this.form.village_id = data.village_id;
                this.form.village_name = data.village_name;
                this.form.name = data.name;
                this.form.sex = data.sex;
                this.form.nation = data.nation;
                this.form.birthday = data.birthday;
                this.form.address = data.address;
                this.form.sfz = data.sfz;
                this.form.phone = data.phone;
                this.form.screening_type = 2;
                this.form.follow_up_number = data.follow_up_number + 1;

                this.getCityList();
                this.getCountyList();
                this.getVillageList();
                this.getTownList();
            },
            //获取生日
            getBirthday() {
                // 获取历史信息
                if (this.form.sfz.length == 18) {
                    getHistoryData({
                        institution_id: this.$store.state.member.institution_id,
                        sfz: this.form.sfz,
                    }).then((res) => {
                        if (res.code === 200) {
                            if (res.data) {
                                this.$confirm('系统检测到身份证信息已存在，是否加载历史数据?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    this.setUser(res.data)
                                }).catch(() => {
                                    this.$message({
                                        type: 'info',
                                        message: '已取消'
                                    });
                                });
                            } else {
                                this.form.screening_type = 1
                                this.form.birthday = this.form.sfz.substr(6, 4) + "-" + this.form.sfz.substr(10, 2) + "-" + this.form.sfz.substr(12, 2);
                                this.form.sex = this.form.sfz.substr(16, 1) % 2 > 0 ? '男' : '女';
                            }
                        } else {
                            this.msgError(res.msg);
                        }
                    });
                }
            },
            getListTask() {
                let param = {
                    pageSize: 100,
                    page: 1,
                }
                listTask(param).then((res) => {
                    if (res.code === 200) {
                        this.taskList = res.data.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //父页面的回调事件
            handleDialogVisible(isUpdate) {
                this.dialogVisible = false;
                this.$emit("childByDialogVisible", this.dialogVisible, isUpdate);
            },
            //创建
            create() {
                this.form.scene = 'user';
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.createLoading = true;
                        createData(this.form).then((response) => {
                            this.createLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
            //修改
            update() {
                this.form.scene = 'user';
                this.$refs["dataForm"].validate((valid) => {
                    if (valid) {
                        this.updateLoading = true;
                        updateData(this.form).then((response) => {
                            this.updateLoading = false;
                            if (response.code == 200) {
                                this.msgSuccess(response.msg);
                                this.handleDialogVisible(true);
                            }
                        });
                    }
                });
            },
        },
        watch: {
            "form.province_id"(newVal, oldVal) {
                if (oldVal !== newVal && oldVal != '') {
                    this.form.city_id = "";
                    this.form.district_id = "";
                    this.form.town_id = "";
                    this.form.village_id = "";
                }
            },
            "form.city_id"(newVal, oldVal) {
                if (oldVal !== newVal && oldVal != '') {
                    this.form.district_id = "";
                    this.form.town_id = "";
                    this.form.village_id = "";
                }
            },
            "form.district_id"(newVal, oldVal) {
                if (oldVal !== newVal && oldVal != '') {
                    this.form.town_id = "";
                    this.form.village_id = "";
                }
            },
            "form.town_id"(newVal, oldVal) {
                if (oldVal !== newVal && oldVal != '') {
                    this.form.village_id = "";
                }
            }
        },
    };
</script>
<style lang="scss" scoped="scoped">
    .el-form-item {
        margin: 0px;
    }

    .red {
        color: red;
    }
</style>
